<template>
  <div class="p-6 bg-base-200/50 rounded-2xl">
    <CommentItem
      :comment="comment"
      :replies="replies"
      :show-replies="true"
      @toggle-like="handleToggleLike"
      @create-reply="handleCreateReply"
      @report-comment="handleReportComment"
      @delete-comment="handleDeleteComment"
      @reply-click="handleReplyClick"
    >
      <!-- 自定义回复列表插槽 -->
      <template #replies="{ replies, formatTime }">
        <div class="space-y-3">
          <div class="flex items-center gap-2 mb-3">
            <div
              class="h-px bg-gradient-to-r from-transparent via-base-300 to-transparent flex-1"
            ></div>
            <span class="text-sm text-base-content/60 font-medium px-3"
              >{{ replies?.length || 0 }} 条回复</span
            >
            <div
              class="h-px bg-gradient-to-r from-transparent via-base-300 to-transparent flex-1"
            ></div>
          </div>
          <div
            v-for="reply in replies || []"
            :key="reply.id"
            class="reply-item bg-gradient-to-r from-base-100/50 to-base-200/30 rounded-xl p-4 border border-base-300/20 hover:bg-base-100/80 transition-all duration-300 hover:shadow-md"
          >
            <div class="flex gap-3">
              <div class="flex-shrink-0">
                <div
                  class="w-10 h-10 rounded-full overflow-hidden border-2 border-primary/30 shadow-md"
                >
                  <img
                    :src="reply.author.avatar"
                    :alt="reply.author.name"
                    class="w-full h-full object-cover"
                  />
                </div>
              </div>
              <div class="flex-1 min-w-0">
                <div class="flex items-center gap-2 mb-2">
                  <h5 class="font-semibold text-base-content text-sm">{{ reply.author.name }}</h5>
                  <div class="px-2 py-1 bg-primary/10 text-primary text-xs rounded-full">回复</div>
                  <time class="text-xs text-base-content/60">{{
                    formatTime?.(reply.createdAt) || reply.createdAt
                  }}</time>
                </div>
                <div class="prose prose-sm max-w-none mb-3">
                  <div v-html="reply.content" class="reply-content"></div>
                </div>
                <div class="flex items-center gap-4">
                  <button
                    class="flex items-center gap-1 text-xs text-base-content/60 hover:text-red-500 transition-colors duration-200"
                  >
                    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
                      <path
                        d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
                      />
                    </svg>
                    {{ reply.likes }}
                  </button>
                  <button
                    class="text-xs text-base-content/60 hover:text-primary transition-colors duration-200"
                  >
                    回复
                  </button>
                  <button
                    class="text-xs text-base-content/60 hover:text-primary transition-colors duration-200"
                  >
                    分享
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </CommentItem>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CommentItem } from '@/components/common/comment'
import type { Comment } from '@/apis/methods/comment.api'

// 评论数据
const comment = ref<Comment>({
  id: '1',
  content:
    '这个示例展示了自定义回复列表插槽的用法。回复列表有渐变背景、分隔线、自定义头像、操作按钮等丰富的展示效果。',
  author: {
    id: '1',
    name: '列表专家',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=list',
  },
  createdAt: '2024-01-15T10:30:00Z',
  updatedAt: '2024-01-15T10:30:00Z',
  likes: 20,
  isLiked: false,
  replyCount: 3,
  parentId: undefined,
  articleId: '1',
  mentionedUsers: [],
  status: 'approved',
})

// 回复数据
const replies = ref<Comment[]>([
  {
    id: 'r1',
    content: '回复列表设计得很棒！',
    author: {
      id: '2',
      name: '用户A',
      avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=userA',
    },
    createdAt: '2024-01-15T11:00:00Z',
    updatedAt: '2024-01-15T11:00:00Z',
    likes: 3,
    isLiked: false,
    replyCount: 0,
    parentId: '1',
    articleId: '1',
    mentionedUsers: [],
    status: 'approved',
  },
  {
    id: 'r2',
    content: '确实，视觉效果很好！',
    author: {
      id: '3',
      name: '用户B',
      avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=userB',
    },
    createdAt: '2024-01-15T11:30:00Z',
    updatedAt: '2024-01-15T11:30:00Z',
    likes: 2,
    isLiked: false,
    replyCount: 0,
    parentId: '1',
    articleId: '1',
    mentionedUsers: [],
    status: 'approved',
  },
  {
    id: 'r3',
    content: '学到了很多！',
    author: {
      id: '4',
      name: '用户C',
      avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=userC',
    },
    createdAt: '2024-01-15T12:00:00Z',
    updatedAt: '2024-01-15T12:00:00Z',
    likes: 1,
    isLiked: false,
    replyCount: 0,
    parentId: '1',
    articleId: '1',
    mentionedUsers: [],
    status: 'approved',
  },
])

// 事件处理函数
const handleToggleLike = (commentId: string) => {
  const targetComment =
    comment.value.id === commentId ? comment.value : replies.value.find((c) => c.id === commentId)
  if (targetComment) {
    targetComment.isLiked = !targetComment.isLiked
    targetComment.likes += targetComment.isLiked ? 1 : -1
  }
}

const handleCreateReply = (parentId: string, content: string) => {
  console.log('创建回复:', { parentId, content })
}

const handleReportComment = (commentId: string) => {
  console.log('举报评论:', commentId)
}

const handleDeleteComment = (commentId: string) => {
  console.log('删除评论:', commentId)
}

// 这些函数在插槽示例中不需要实际使用，但保留用于演示
// const handleAvatarClick = (author: Comment['author']) => {
//   console.log('点击头像:', author)
// }

// const handleAuthorClick = (author: Comment['author']) => {
//   console.log('点击作者:', author)
// }

// const handleContentClick = (comment: Comment) => {
//   console.log('点击内容:', comment)
// }

const handleReplyClick = (reply: Comment) => {
  console.log('点击回复:', reply)
}
</script>

<style scoped>
/* 自定义回复列表样式 */
.reply-content {
  line-height: 1.6;
}
</style>
